btnCircle.onclick = function () {
    new Circle()
};
let index = 0;

// 父类
class Graph {
    /**
     * 随机生成 位置、大小、颜色
     */
    constructor() {
        this.render()
    }

    render(props) {
        this.props = props;
    }

    randomNum(min, max) {
        // 根据传入的min和max生成随机数
        return Math.floor(Math.random() * (max - min) + min);
    }

    randomColor() {
        // 随机生成颜色
        let i = 0;
        let color = '#';
        while (i < 6) {
            // 十六进制的颜色码
            color += this.randomNum(0, 15).toString(16);
            i++;
        }
        return color;
    }

    drag() {
        // console.log(this)
        // this指向 function的归属者
        // document.onmousemove = function () {
        //     console.log(this) #document
        // }
        // this指向 不是箭头函数的 function的归属者（类的对象）
        // document.onmousemove = ()=>{
        //     console.log(this)
        // }
        this.props.onmousedown = (ev) => {
            this.dragDown(ev)
        }
    }

    dragDown(ev) {
        // 在图形上方按下鼠标
        // 确保按住的图形是在最上层
        this.props.style.zIndex = (++index) + '';
        
        // 图形的相对位置 this.props.offsetLeft this.props.offsetTop
        // 鼠标点击的位置 ev.clientX ev.clientY

        // 保留鼠标点击位置与图形位置的偏移量，方便在鼠标位置变化的时候计算图形的位置
        this.disX = ev.clientX - this.props.offsetLeft;
        this.disY = ev.clientY - this.props.offsetTop;

        // 按下后 鼠标移动
        document.onmousemove = (event) => {
            this.dragMove(event)
        };
        document.onmouseup = this.dragUp;
    }

    dragMove(ev) {
        this.props.style.left = `${ev.clientX - this.disX}px`;
        this.props.style.top = `${ev.clientY - this.disY}px`;
    }

    dragUp() {
        // 注销鼠标的移动事件
        document.onmousemove = null;
        document.onmouseup = null;
    }

}

// 子类 继承父类的方法
class Circle extends Graph {
    /**
     * 随机生成 位置、大小、颜色
     */
    constructor() {
        super(); // 调用父类的构造
        this.x = this.randomNum(0, document.body.offsetWidth);
        this.y = this.randomNum(0, document.body.offsetHeight);
        this.r = this.randomNum(20, 100);
        this.color = this.randomColor();

        this.createCircle();
        this.drag();
    }

    createCircle() {
        // 解构
        let {x, y, r, color} = this;
        this.circle = document.createElement('div');
        this.circle.classList.add('circle');
        this.circle.style.left = `${x}px`;
        this.circle.style.top = `${y}px`;
        this.circle.style.width = `${r * 2}px`;
        this.circle.style.height = `${r * 2}px`;
        this.circle.style.backgroundColor = color;

        this.render(this.circle);
        box.appendChild(this.circle);
    }

}